<template>
    <div class="container">
        <!-- 统计检索 -->
        <el-table ref="table" :data="searchDataSource" :header-cell-style="{ background: '#fbfbfa' }" class='tableBottom' row-class-name="getRowClassName">
            <el-table-column label="统计时间" fixed align="center" width="160">
                <template #default="{ row }">
                    <div class='timeDiv'>
                        <p>{{ timeTranslate(row.WBeginTime) }}</p>
                        <p>-</p>
                        <p>{{ timeTranslate(row.WEndTime) }}</p>
                    </div>

                </template>
            </el-table-column>
            <el-table-column label="检测总数" fixed align="center" prop="TotalCount" width="120"> </el-table-column>
            <!-- <el-table-column label="生产效率" fixed align="center">
                <template #default>
                    <p>{{ ProductionEfficiency }}</p>
                </template>
            </el-table-column> -->
            <!-- 合格品 -->
            <el-table-column prop="qualified" fixed align="center" width="120">
                <template #header>
                    <div style="white-space: normal">
                        <span style="color:#1aa367">合格品</span>
                        <br />
                        <span>总数占比</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div style="white-space: normal">
                        <span style="color:#1aa367">{{ row.QualifiedCount }}</span>
                        <br />
                        <span>{{ row.QualifiedRate ? row.QualifiedRate / 10 : 0 }}%</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 不良品 -->
            <el-table-column prop="address" fixed align="center" width="120">
                <template #header>
                    <div style="white-space: normal">
                        <span style="color:#eb5757">不良品</span>
                        <br />
                        <span>总数占比</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div style="white-space: normal">
                        <span style="color:#eb5757">{{ row.DefectiveCount }}</span>
                        <br />
                        <span>{{ row.DefectiveRate ? row.DefectiveRate / 10 : 0 }}%</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 异常品 -->
            <el-table-column prop="address" fixed align="center" width="120">
                <template #header>
                    <div style="white-space: normal">
                        <span style="color:#ffbc00">异常品</span>
                        <br />
                        <span>总数占比</span>
                    </div>
                </template>
                <template #default="{ row }">
                    <div style="white-space: normal">
                        <span style="color:#ffbc00">{{ row.AbnormalCount }}</span>
                        <br />
                        <span>{{ row.TotalCount == 0 ? 0 : (row.AbnormalCount / row.TotalCount).toFixed(2) }}%</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 后台返回的数据 -->
            <!-- 表头太多不会换行显示 -->
            <el-table-column v-if="searchCheckNameList?.length" v-for="(item, index) in searchCheckNameList" :key="item" :label="item" align="center" width="120">
                <template #header>
                    <div style="white-space: break-word;">
                        {{ item }}
                    </div>
                </template>
                <template #default="{ row }">
                    <div style="white-space: normal">
                        <!-- {{[Object.entries(row)].slice(2)}} -->
                        {{ (fun(row, searchCheckNameList.length, index))[index] }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-else align="center">
                <template #header>
                    <div style="white-space: nowrap;">
                        暂无模板
                    </div>
                </template>

            </el-table-column>
            <!-- 表头太多会折行显示 -->
            <!-- <el-table-column v-for="(item, index) in searchCheckNameList" :key="index" :label="item" >
                <template #default="scope">
                    <div style="white-space: normal">
                        {{ (scope.row.CheckValues.split(','))[index] }}
                    </div>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, onUnmounted } from "vue";
import moment from 'moment'
import dayjs from "dayjs"

onMounted(() => {

})
const props = defineProps(["searchCheckNameList", "searchDataSource"])
const prop = ref<any>(props)
const fun = (row: any, NameList: any, index: any) => {
    const res: any = []
    var count = 0;
    for (var key in row) {
        if (row.hasOwnProperty(key) && key.startsWith("PresetValues")) {
            if (count < NameList) {
                var result = row[key];
                res.push(result)
                // count++;
            } else {
                delete row[key];
            }
        }
    }
    return res
}

const timeTranslate = (val: any) => {
    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}


</script>

<style scoped>
@media screen and (max-height: 1440px) {
    .tableBottom {
        height: 970px;
    }


}

@media screen and (max-height: 1080px) {
    .tableBottom {
        height: 600px;
    }
}
.timeDiv{
    padding: 5px 0;
}
:deep(.el-scrollbar__bar.is-horizontal){
    height: 14px;
    border-radius:40px;
}
</style>